<template>
	<transition name="fade">
	  <div class="previewer" v-if="isShow" @click.stop="isShow = false">

	    <div class="pic-wrapper" v-if="list.length>0">
	    	<swiper class="pic-swiper" :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in list" :key="index">
            <img :src="item">
          </swiper-slide>      
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
	    </div>

      <div class="content"><div class="text-wrapper" v-html="content"></div></div>
	  </div>
  </transition>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
	props: {
		list: {
			type: Array,
			default: []
		},
    content: {
      type: String,
      default: ''
    },
    cur: {
      type: Number,
      default: 0
    }
	},
	components: {
		swiper,
		swiperSlide
	},
  data () {
    return {
    	isShow: false,
    	swiperOption: {
        observer: true,
        observeParents:true,
        notNextTick: true,
        initialSlide: 0,
        pagination: '.swiper-pagination',
        paginationType : 'fraction',
        paginationClickable: true
      }
    }
  },
  computed: {   
    swiper () {  
      return this.$refs.mySwiper.swiper;  
    }  
  },  
  methods: {
  	show () {
  		this.isShow = !this.isShow
  	}
  },
  watch: {
    cur (val) {
      this.swiperOption.initialSlide = val
    }
  }
}
</script>

<style scoped>
.previewer {
	position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 640px;
  z-index: 101;
  background: rgba(0, 0, 0,.95);
  overflow: hidden;
}
.pic-wrapper {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
}
.pic-swiper {
	height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
}
.swiper-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}
.pic-swiper {
  overflow: inherit
}
.swiper-pagination {
  top: 15px !important;
  color: #fff;
  font-size: 16px;
}
.fade-enter-active {
  transition: all .3s;
  opacity: 1;
}
.fade-leave-active {
  opacity: 0;
}
.fade-enter,
.fade-leave {
  opacity: 0;
}
.content {
  position: absolute;
  bottom: 0;
  padding: 10px 15px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  font-size: 13px;
  color: #fff;
  line-height: 18px;
  z-index: 100; 
}
.text-wrapper {
  max-height: 100px;
  overflow-y: auto;
  text-align:justify;  
}
</style>
